<template>
  <div>
    <Modal v-model="show"  :title="title"  :mask-closable="false" :footer-hide=true width="700px" :closable="true">
      <div class="content-div">
        <canvas ref="canvas"/>
        <div class="device-info">
          <Row :gutter="4">
            <Col span="10" class="span-rg"><span>{{$t('platform_protocol')}}:</span></Col>
            <Col span="14"><span>{{codeSource.protocol}}</span></Col>
          </Row>
          <Row :gutter="4">
            <Col span="10" class="span-rg"><span>{{$t('server_id')}}：</span></Col>
            <Col span="14"><span>{{codeSource.gbServerCode}}</span></Col>
          </Row>
          <Row :gutter="4">
            <Col span="10" class="span-rg"><span>{{$t('domain')}}：</span></Col>
            <Col span="14"><span>{{codeSource.gbServerDomain}}</span></Col>
          </Row>
          <Row :gutter="4">
            <Col span="10" class="span-rg"><span>{{$t('ip_address')}}：</span></Col>
            <Col span="14"><span>{{codeSource.gbServerHost}}</span></Col>
          </Row>
          <Row :gutter="4">
            <Col span="10" class="span-rg"><span>{{$t('port')}}：</span></Col>
            <Col span="14"><span>{{codeSource.gbServerPort}}</span></Col>
          </Row>
          <Row :gutter="4">
            <Col span="10" class="span-rg"><span>{{$t('user')}}：</span></Col>
            <Col span="14"><span>{{codeSource.userName}}</span></Col>
          </Row>
          <Row :gutter="4">
            <Col span="10" class="span-rg"><span>{{$t('password')}}：</span></Col>
            <Col span="14"><span>{{codeSource.gbServerPasswrd}}</span></Col>
          </Row>
          <Row :gutter="4">
            <Col span="10" class="span-rg"><span>{{$t('local_port')}}：</span></Col>
            <Col span="14"><span>{{codeSource.localPort}}</span></Col>
          </Row>
          <Row :gutter="4">
            <Col span="10" class="span-rg"><span>{{$t('register_expire')}}：</span></Col>
            <Col span="14"><span>{{codeSource.registerExpire}}</span></Col>
          </Row>
          <Row :gutter="4">
            <Col span="10" class="span-rg"><span>{{$t('keepalive')}}：</span></Col>
            <Col span="14"><span>{{codeSource.keepalive}}</span></Col>
          </Row>
          <Row :gutter="4">
            <Col span="10" class="span-rg"><span>{{$t('code')}}：</span></Col>
            <Col span="14"><span>{{codeSource.deviceId}}</span></Col>
          </Row>
          <Row :gutter="4">
            <Col span="10" class="span-rg"><span>{{$t('alarm_code')}}：</span></Col>
            <Col span="14"><span>{{codeSource.alarmChannel}}</span></Col>
          </Row>
          <Row :gutter="4">
            <Col span="10" class="span-rg"><span>{{$t('back_camera')}}：</span></Col>
            <Col span="14"><span>{{codeSource.backChannel}}</span></Col>
          </Row>
          <Row :gutter="4">
            <Col span="10" class="span-rg"><span>{{$t('front_camera')}}：</span></Col>
            <Col span="14"><span>{{codeSource.frontCamera}}</span></Col>
          </Row>
          <Row :gutter="4">
            <Col span="10" class="span-rg"><span>{{$t('extenal_camera')}}：</span></Col>
            <Col span="14"><span>{{codeSource.extenalCamera}}</span></Col>
          </Row>
        </div>
        <div></div>
      </div>

    </Modal>
  </div>
</template>
<script>
import QRCode from "qrcode"; //引入生成二维码插件
export default {
  name: "Device4gQrcode",
  computed:{
    title(){
      return this.$t('scan_code_to_register');
    }
  },
  data(){
    return{
      show: false,
      codeSource: {
        protocol:"01", //GB28181
        gbServerCode: "",
        gbServerDomain: "",
        gbServerHost: "",
        gbServerPort: "",
        userName: "",
        gbServerPasswrd: "",
        localPort: "15060",
        registerExpire:"3600",
        keepalive: "5",
        deviceId: "",
        alarmChannel: "",
        backChannel: "",
        frontCamera: "",
        extenalCamera: ""
      }
    }
  },
  methods:{
    genQrCode(){

      console.log(">>>>>>>>> Device4gQrcode.genQrCode: codeSource=%o",this.codeSource);

      if (!this.codeSource){
        return;
      }
      const txt=this.codeSource.protocol+"|"+
        this.codeSource.gbServerCode + "|" +
        this.codeSource.gbServerDomain + "|" +
        this.codeSource.gbServerHost + "|" +
        this.codeSource.gbServerPort + "|" +
        this.codeSource.userName + "|" +
        this.codeSource.gbServerPasswrd + "|" +
        this.codeSource.localPort + "|" +
        this.codeSource.registerExpire + "|" +
        this.codeSource.keepalive + "|" +
        this.codeSource.deviceId + "|" +
        this.codeSource.alarmChannel + "|" +
        this.codeSource.backChannel + "|" +
        this.codeSource.frontCamera + "|" +
        this.codeSource.extenalCamera;


/*      protocol:"01", //GB28181
        gbServerCode: row.gbServerCode,
        gbServerDomain: row.gbServerDomain,
        gbServerHost: row.gbServerHost,
        gbServerPort: row.gbServerPort,
        userName: row.gbServerCode,
        gbServerPasswrd: row.gbServerPasswrd,
        localPort: "",
        registerExpire:"3600",
        keepalive: "5",
        deviceId: row.code,
        alarmChannel: row.defaultAlarmChannel,
        backChannel: row.defaultChannel,
        frontCamera: "",
        extenalCamera: ""*/
      //var canvas=document.getElementByld("canvas");
      // 调用函数去生成二维码，参数依次为：二维码的容器、要生成的内容、回调函数
      console.log(txt);
      QRCode.toCanvas(this.$refs.canvas,txt,function(error){
        if(error){
          console.error(error);
        }else{
          console.log("success!");        }
      });
    },
    openDialog: function (deviceInfo) {
      this.codeSource = deviceInfo;
      this.genQrCode();
      this.show = true;
    },
  },
  mounted() {

  }



}

</script>
<style lang="less">
.content-div {
  display: flex;
  justify-content: left;
  align-content: center;
}
.device-info{
  width: 300px;
  margin-left: 20px;
  //background-color: #03d3ec;
}
.span-rg{
  text-align: right;
}
</style>
